<!-- recordtype-cascader.vue -->
<template>
  <div>
    <!-- 
      filterable	是否可搜索选项
      clearable	是否支持清空选项
      options	可选项数据源，键名可通过 Props 属性配置

      Props 
        value	指定选项的值为选项对象的某个属性值
        label	指定选项标签为选项对象的某个属性值
    -->
    <el-cascader
      filterable
      clearable
      placeholder="试试搜索：手机"
      :change-on-select="true"
      v-model="selPath"
      :options="recordTypes"
      :props="setting"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      setting: {
        value: "id",
        label: "recordTypeName",
        children: "children",
      },
      recordTypes: [],
    };
  },
  components: {},
  props: {
    paths: {
      type: Array,
      default() {
        return [];
      },
    }
  },
  methods: {
    getRecordtype() {
      this.$http({
        url: this.$http.adornUrl("/product/word/recordtype/tree"),
        method: "get",
      }).then(({ data }) => {
        this.recordTypes = data.data;
      });
    },
  },
  //生命周期函数 在实例创建完成后被立即同步调用。
  created() {
    this.getRecordtype();
  },
  computed:{
    selPath: {
      get(){
        //要使用计算属性, 如果直接在data中设置,paths后续变化只有在组件新创建后才会生效
        return this.paths;
      },
      set(v){
        //console.log("选中属性02: ", v);
        this.$emit("update:paths", v);
      }
    }
  }
};
</script>

<style>
</style>